import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';

const Sidebar: React.FC = () => {
  const location = useLocation();
  const [isCollapsed, setIsCollapsed] = useState(false);

  const navItems = [
    {
      path: '/dashboard',
      label: 'Dashboard',
      icon: '📊',
      description: 'System overview and metrics'
    },
    {
      path: '/virtual-machines',
      label: 'Virtual Machines',
      icon: '💻',
      description: 'Manage your virtual machines'
    },
    {
      path: '/storage',
      label: 'Storage',
      icon: '💾',
      description: 'Storage pools and volumes'
    },
    {
      path: '/networks',
      label: 'Networks',
      icon: '🌐',
      description: 'Network configuration'
    },
    {
      path: '/tasks-logs',
      label: 'Tasks & Logs',
      icon: '📋',
      description: 'System tasks and logs'
    },
    {
      path: '/settings',
      label: 'Settings',
      icon: '⚙️',
      description: 'Application settings'
    },
  ];

  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };

  return (
    <div className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
      <div className="sidebar-header">
        <div className="logo">
          {!isCollapsed && <h2>LVM Manager</h2>}
          {isCollapsed && <span className="logo-icon">🖥️</span>}
        </div>
        <button
          className="collapse-btn"
          onClick={toggleSidebar}
          title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
        >
          {isCollapsed ? '→' : '←'}
        </button>
      </div>

      <nav className="nav-menu">
        <ul>
          {navItems.map((item) => (
            <li key={item.path} className="nav-item">
              <Link
                to={item.path}
                className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
                title={isCollapsed ? item.label : ''}
              >
                <span className="nav-icon">{item.icon}</span>
                {!isCollapsed && (
                  <div className="nav-content">
                    <span className="nav-label">{item.label}</span>
                    <span className="nav-description">{item.description}</span>
                  </div>
                )}
              </Link>
            </li>
          ))}
        </ul>
      </nav>

      <div className="sidebar-footer">
        <div className="connection-status">
          <span className="status-indicator connected"></span>
          {!isCollapsed && <span className="status-text">Connected</span>}
        </div>
      </div>
    </div>
  );
};

export default Sidebar;